<!--数据浏览页面-->
<script setup>
import { userInfoStore } from '@/stores/user'
import request from '@/utils/request.js'
import { ref, reactive } from 'vue'
import Cookies from 'js-cookie'
//分页
const startPage = ref(1)
const size = 40
//笔记数组
const notesList = ref([])

const userInfo = userInfoStore()

request
  .post('/user/notesByUser?startPage=' + startPage.value + '&size=' + size, {
    headers: { token: Cookies.get('token') }
  })
  .then((res) => {
    notesList.value = res.records
      .sort((a, b) => {
        return b.id - a.id
      })
      .slice(0, 8)
    console.log(notesList)
  })
</script>

<template>
  <div class="cth">
    <div class="creator-home">
      <div class="home-top">
        <div class="top-user">
          <div class="user-head" v-if="userInfo.userInfo.headImage == '/'"></div>
          <img
            class="head-image"
            :src="'../../../../../public/headImage/' + userInfo.userInfo.headImage"
            v-if="userInfo.userInfo.headImage != '/'"
          />
          <div class="user-detail">
            <div class="user-nickname">
              {{ userInfo.userInfo.nickname }}
            </div>
            <div class="user-detail-info">
              <div class="user-info user-follw">
                {{ userInfo.userInfo.follow }}
                <span class="info-text"> 关注 </span>
              </div>
              <div class="user-info user-fs">
                {{ userInfo.userInfo.fans }}
                <span class="info-text"> 粉丝 </span>
              </div>
              <div class="user-info user-likes">
                {{ userInfo.userInfo.like }}
                <span class="info-text"> 获赞与收藏 </span>
              </div>
              <div style="border-right: 1px solid rgb(224, 224, 224); margin-right: 20px"></div>
              <div class="user-info user-id">
                <span class="info-text"> 小红书号: {{ userInfo.userInfo.username }} </span>
              </div>
            </div>
            <div class="user-say">
              {{ userInfo.userInfo.blurb }}
            </div>
          </div>
        </div>
      </div>
      <div class="home-data">
        <div class="home-data-title">
          <div style="display: flex; align-items: center">
            <div
              style="
                background-color: rgb(58, 100, 255);
                width: 5px;
                border-radius: 3px;
                height: 20px;
              "
            ></div>
            <span style="padding-left: 10px">数据总览</span>
          </div>
        </div>
        <div class="home-data-main">
          <div class="home-data-main-block">
            <div class="home-data-main-block-title">新增粉丝</div>
            <div class="home-data-main-block-num">0</div>
          </div>
          <div class="home-data-main-block">
            <div class="home-data-main-block-title">主页访客</div>
            <div class="home-data-main-block-num">0</div>
          </div>
          <div class="home-data-main-block">
            <div class="home-data-main-block-title">观看数</div>
            <div class="home-data-main-block-num">0</div>
          </div>
          <div class="home-data-main-block">
            <div class="home-data-main-block-title">互动数</div>
            <div class="home-data-main-block-num">0</div>
          </div>
        </div>
        <div class="home-data-title">
          <div style="display: flex; align-items: center">
            <div
              style="
                background-color: rgb(58, 100, 255);
                width: 5px;
                border-radius: 3px;
                height: 20px;
              "
            ></div>
            <span style="padding-left: 10px">最新发布笔记数据</span>
          </div>
          <div class="home-data-notes">
            <div class="home-data-notes-note" v-for="(item, index) in notesList" :key="index">
              <div v-if="index <= 8">
                <div class="home-data-notes-note-cover">
                  <el-image
                    :src="'/images/' + item.cover"
                    fit="b"
                    class="sess-image"
                    v-if="item.cover !== ''"
                    @click="clickNoteImage(item.id)"
                  />
                </div>
                <div class="home-data-notes-note-title">{{ item.title }}</div>
                <div class="home-data-notes-note-date">
                  <span>
                    发布于
                    {{
                      new Date(item.createTime).getFullYear() +
                      '-' +
                      (new Date(item.createTime).getMonth() + 1) +
                      '-' +
                      new Date(item.createTime).getDate()
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-classroom"></div>
    </div>
    <div class="note-insp">a</div>
  </div>
</template>

<style scoped lang="scss">
.cth {
  display: flex;
}
.creator-home {
  margin: 20px;
  min-width: 1250px;
  .home-top {
    background: white;
    height: 150px;
    border-radius: 10px;
    .top-user {
      display: flex;
      padding: 35px;
      .user-head {
        height: 80px;
        width: 80px;
        border-radius: 40px;
        background: #7c7c7c;
      }
      .head-image {
        height: 80px;
        width: 80px;
        border-radius: 40px;
      }
      .user-detail {
        padding-left: 20px;
        .user-nickname {
          font-weight: bolder;
          padding-bottom: 10px;
        }
        .user-detail-info {
          display: flex;
          padding-bottom: 10px;
          .user-info {
            padding-right: 20px;
            font-size: 14px;
            .info-text {
              color: rgb(139, 140, 143);
            }
          }
        }
        .user-say {
          color: rgb(139, 140, 143);
        }
      }
    }
  }
  .home-data {
    background: white;
    height: 500px;
    margin-top: 20px;
    border-radius: 10px;
    .home-data-title {
      padding-left: 40px;
      padding-top: 20px;
      font-size: 20px;
      color: rgb(98, 98, 98);
      font-weight: 500;
      .home-data-notes {
        padding-top: 20px;
        display: flex;
        .home-data-notes-note {
          padding-right: 20px;
          .home-data-notes-note-cover {
            height: 180px;
            width: 140px;
            border-radius: 5px;
            background-color: rgb(113, 113, 113);
            .head-image {
              height: 20px;
              width: 20px;
              border-radius: 10px;
            }
            .sess-image {
              border-radius: 5px;
              cursor: pointer;
              transition: filter 0.3s ease;
              height: 100%;
            }
            .sess-image:hover {
              filter: brightness(70%);
            }
          }
          .home-data-notes-note-title {
            padding-top: 10px;
            font-size: 12px;
          }
          .home-data-notes-note-date {
            font-size: 12px;
            color: #c3c3c3;
            padding-top: 25px;
          }
        }
      }
    }
    .home-data-main {
      width: 100%;
      padding-top: 40px;
      padding-left: 10px;
      display: flex;
      .home-data-main-block {
        margin-left: 20px;
        background-color: rgb(251, 251, 251);
        width: 180px;
        height: 80px;
        border-radius: 5px;
        color: rgb(145, 143, 140);
        font-size: 14px;
        .home-data-main-block-title {
          padding-left: 20px;
          padding-top: 10px;
        }
        .home-data-main-block-num {
          font-size: 24px;
          font-weight: bolder;
          color: black;
          padding-left: 20px;
          padding-top: 5px;
        }
      }
    }
  }
  .home-classroom {
    background: white;
    height: 300px;
    border-radius: 10px;
    margin-top: 20px;
  }
}
.note-insp {
  min-width: 300px;
  background: white;
  margin-top: 20px;
  height: 650px;
  border-radius: 10px;
}
</style>
